<template>
  <div>
    <a-button type="primary" style="margin-bottom: 10px" @click="addModal">添加解析</a-button>
    <a-button type="primary" style="margin-bottom: 10px;margin-left: 5px" @click="loadData">刷新</a-button>

    <a-table :loading="dataLoading" :columns="columns" rowKey="id" :data-source="listData"
             :locale="{emptyText: '暂无数据,添加一个试试看看'}"
             :pagination="pagination"
             @change="handleTableChange"
             :scroll="{ x: 10 }">

      <template #bodyCell="{ column ,record}">
        <template v-if="column.key === 'status'">
          <a-tag v-if="record.status==0" color="#f50">禁用</a-tag>
          <a-tag  v-if="record.status==1" color="#87d068">启用</a-tag>
        </template>
        <template v-if="column.key === 'action'">
          <a-button type="primary" style="margin-bottom: 5px;margin-left: 5px" @click="edit(record)">编辑</a-button>
          <a-button type="primary" style="margin-bottom: 5px;margin-left: 5px" @click="removeData(record)">删除</a-button>
        </template>
      </template>
    </a-table>
  </div>


  <div>
    <a-modal okText="确定" cancelText="取消" v-model:visible="addVisible" title="信息"
             @ok="addOk">
      <a-form :model="formState" ref="formTable" :layout="'vertical'" >
        <a-form-item label="域名 " >
          <a-input v-model:value="formState.domain" placeholder="域名"/>
        </a-form-item>
        <a-form-item label="备注">
          <a-input v-model:value="formState.desc" placeholder="备注"/>
        </a-form-item>
        <a-form-item label="解析类型">
          <a-select
              v-model:value="formState.type"
              :options="optionsTypes"
              placeholder="选择解析类型"
          ></a-select>
        </a-form-item>
        <a-form-item label="记录值">
          <a-input v-model:value="formState.record" placeholder="记录值"/>
        </a-form-item>
        <a-form-item label="状态">
          <a-select
              v-model:value="formState.status"
              :options="optionsStatus"
              placeholder="选择状态"
          ></a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import {getDomain, removeDomain, addDomain} from "../../api/client/domain.js";
import {onMounted, reactive, ref} from "vue";
import {notification} from "ant-design-vue";


const listData = ref();
const dataLoading = ref(false);
const addVisible = ref(false);
const isAdd = ref(false);

const formState = reactive({
  domain: "",
  desc: "",
  id:"",
  type:"",
  record:"",
  status:""
})

const optionsTypes=[
  {
    label:"A",
    value:"A"
  },
  {
    label:"MX",
    value:"MX"
  },
  {
    label:"CNAME",
    value:"CNAME"
  },{
    label:"TXT",
    value:"TXT"
  }
]

const optionsStatus=[
  {
    label:"启用",
    value:"1"
  },
  {
    label:"禁用",
    value:"0"
  },
]

const pagination = reactive({
  total: 0,
  current: 1,
  pageSize: 10,
});

const loadData = () => {
  dataLoading.value = true
  getDomain({
    current: pagination.current,
    pageSize: pagination.pageSize
  }).then(res => {
    dataLoading.value = false
    listData.value = res.data.records
    pagination.current = res.data.current
    pagination.total = res.data.total
  })
}

const removeData = (item) => {
  removeDomain({
    id: item.id
  }).then(res => {
    notification.open({
      message: res.msg,
    })
    loadData()
  })
}



const edit = (item) => {
  formState.desc = item.desc
  formState.id = item.id
  formState.domain = item.domain
  formState.type = item.type
  formState.record = item.record
  formState.status = item.status
  addVisible.value = true
}

const columns = [
  {title: '编号', dataIndex: 'id', key: 'id'},
  {title: '域名', dataIndex: 'domain', key: 'domain'},
  {title: '备注', dataIndex: 'desc', key: 'desc'},
  {title: '解析类型', dataIndex: 'type', key: 'type'},
  {title: '记录值', dataIndex: 'record', key: 'record', ellipsis: true,},
  {title: '状态', dataIndex: 'status', key: 'status'},
  {title: '操作', key: 'action'},
];

const handleTableChange = (item) => {
  pagination.current = item.current
  pagination.pageSize = item.pageSize
  pagination.total = item.total
  loadData()
}

const addModal = () => {
  formState.desc = ""
  formState.id = undefined
  formState.domain =  ""
  formState.type = "A"
  formState.record = ""
  formState.status = "1"
  addVisible.value = true
}

const addOk = () => {
  addDomain({...formState}).then(res => {
    notification.open({
      message: res.msg,
    })
    loadData()
    addVisible.value = false
  })
}

onMounted(() => {
  loadData()
})

</script>

<style scoped>

</style>
